<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Calendar Navigator</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
	#cal2Container { clear:left;margin-top:10px }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Calendar Navigator</h1>

<div class="exampleIntro">
	<p>This example shows you how to enable and configure the Calendar Navigator, which will allow users to quickly jump to a specific year/month without having to scroll through months sequentially.</p>

			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="cal1Container"></div>
<div id="cal2Container"></div>

<script type="text/javascript">
    YAHOO.namespace("example.calendar");

    YAHOO.example.calendar.init = function() {
        // Enable navigator with the default configuration
        YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1Container", {navigator:true});
        YAHOO.example.calendar.cal1.render();
        
        // Enable navigator with a custom configuration
        var navConfig = {
            strings : {
                month: "Choose Month",
                year: "Enter Year",
                submit: "OK",
                cancel: "Cancel",
                invalidYear: "Please enter a valid year"
            },
            monthFormat: YAHOO.widget.Calendar.SHORT,
            initialFocus: "year"
        };
        YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2Container", {navigator: navConfig});
        YAHOO.example.calendar.cal2.render();
    }

    YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>

<div style="clear:both" ></div>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
